<template>
  <view class="publish-article-page">
    <!-- 导航栏区域 -->
    <nav-bar title="文章发布" textAlign="center"></nav-bar>
    <view class="main-container">
      <!-- 标题区域 -->
      <view class="article-title-container">
        <input type="text" v-model="communityContent.articleTitle" placeholder="输入一个醒目的标题~" maxlength="40" />
      </view>
      <!-- 文章内容区域 -->
      <view class="article-content-container">
        <textarea v-model="communityContent.articleContent" :data-maxnum="communityContent.articleContent.length+'/500'"
          placeholder="分享今天的故事~" :maxlength="500" />
      </view>
      <!-- 文章图片区域 -->
      <view class="tips"> 默认第一张为主图哦~ </view>
      <view>
        <image-upload @change="handleUploadChange" />
      </view>
      <!-- 选择标签区域 	-->
      <view class="label-container">
        <view class="title">选择话题</view>
        <view class="list-container">
          <view class="label-tag-container"
            :class="{'label-tag-active-container':item.familyId===communityContent.familyId}"
            v-for="(item,index) in labelList" :key="item.familyId" @click="handleSelectLabel(item.familyId)">
            {{item.familyName}}
          </view>
        </view>
      </view>

      <!-- 发布区域 -->
      <view class="submit-container">
        <view class="submit-btn" @click="handleReleaseArticle">
          <text>{{send_loading?'发布中':'发布'}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getTopicListApi,
    postArticesApi
  } from '@/api/community/publish-article.js'
  export default {
    data() {
      return {
        communityContent: {
          // 文章标题
          articleTitle: "",
          // 文章内容
          articleContent: "",
          // 标签ID
          familyId: '',
          // 图片列表
          images: {
            // 图片列表数据
            data: [],
            // 上传状态
            status: true
          },
        },
        // 话题列表
        labelList: [],
        // 发布状态
        send_loading: false,

      }
    },

    onLoad(e) {
      this.send_loading = false;
      if (e.familyId) {
        this.communityContent.familyId = e.familyId;
      }
      this.handleGetTopicList()
    },
    methods: {
      // 上传状态发生了变化
      handleUploadChange(e) {
        this.communityContent.images.data = e.data;
        this.communityContent.images.status = e.status;
      },
      // 获取话题
      async handleGetTopicList() {
        const {
          data: res
        } = await getTopicListApi()
        if (!res.success) {
          return;
        }
        let data = res.data.topicList;
        this.labelList = data;
        let find = data.find((item) => {
          return item.familyId == this.communityContent.familyId
        });
        if (!find) {
          this.communityContent.familyId = '';
        }
      },
      // 选择标签
      handleSelectLabel(familyId) {
        this.communityContent.familyId = familyId
      },
      // 发布文章
      handleReleaseArticle() {
        // 名：图片上传中 禁止发布执行
        if (!this.communityContent.images.status) {
          uni.showToast({
            title: '图片正在上传中，暂不能发布',
            icon: 'none',
            duration: 2000
          });
          return;
        }
        if (this.communityContent.articleTitle == '' || this.communityContent.articleContent == '') {
          uni.showToast({
            title: '标题或内容不允为空',
            icon: 'none',
            duration: 2000
          });
          return;
        }
        if (this.communityContent.articleTitle.length > 16) {
          uni.showToast({
            title: '标题需要在16字以内',
            icon: 'none',
            duration: 2000
          });
          return;
        }
        if (this.communityContent.articleContent.length > 500) {
          uni.showToast({
            title: '内容需要在500字以内',
            icon: 'none',
            duration: 2000
          });
          return;
        }
        if (this.communityContent.familyId == '') {
          uni.showToast({
            title: '请选择话题',
            icon: 'none',
            duration: 2000
          });
          return;
        }
        this.handlePostArticesApi();
      },
      async handlePostArticesApi() {
        if (this.send_loading) {
          uni.showToast({
            title: '正在发布中',
            icon: 'none',
            duration: 2000
          });
          return
        }
        uni.showLoading({
          title: '正在发布中',
        });
        this.send_loading = true;
        let {
          data: res
        } = await postArticesApi(
          this.communityContent.familyId,
          this.communityContent.articleTitle,
          this.communityContent.articleContent,
          this.communityContent.images.data
        );
        this.send_loading = false;
        uni.hideLoading()
        if (res.success) {
          uni.showToast({
            title: '文章发布成功',
            icon: "none"
          })
          // 名:通过页面通讯 发布的文章数据与话题传递给上一页面（社区首页）
          uni.$emit('article-update', {
            value: this.communityContent.familyId,
            data: res.data.article,
            type: 'publish-article'
          })
          uni.navigateBack();
        } else {
          uni.showToast({
            title: res.message,
            icon: "none"
          })
        }
      }

    },
  }
</script>

<style lang="scss" scoped>
  .publish-article-page {
    min-height: 100vh;
    background-color: #FFFFFF;
  }

  .main-container {
    padding: 0rpx 40rpx;
    padding-top: 40rpx;

    // 文章标题
    .article-title-container {
      input {
        width: 100%;
        height: 100rpx;
        background-color: #FFFFFF;
        font-size: 40rpx;
      }
    }

    // 文章内容
    .article-content-container {
      border-top: 4rpx solid #AEAEAE;
      background-color: #FFFFFF;
      font-size: 32rpx;
      padding-top: 20rpx;

      // 多行文本框
      textarea {
        border-radius: 5px;
        width: calc(100% - 16px);
        padding: 16rpx 16rpx 40rpx 16rpx;
        line-height: 40rpx;
        color: #000000;
        position: relative;
        height: 500rpx;
        border-bottom: 4rpx solid #AEAEAE;

        &:after {
          content: attr(data-maxnum);
          position: absolute;
          right: 10rpx;
          bottom: 0rpx;
          font-size: 28rpx;
          color: gray;
        }
      }

    }

    // 提示
    .tips {
      color: #AEAEAE;
      font-size: 26rpx;
      width: 100%;
      padding: 20rpx 0;
    }

    // 话题
    .label-container {
      .title {
        font-size: 34rpx;
        width: 100%;
        margin-top: 20rpx;
        font-weight: bold;
      }

      .list-container {
        width: 100%;
        margin-bottom: 50rpx;
        min-height: 100rpx;
        font-size: 24rpx;
        color: #FFFFFF;

        // 话题
        .label-tag-container {
          margin-top: 30rpx;
          float: left;
          margin-right: 20rpx;
          background-color: #cccccc;
          max-width: 140rpx;
          border-radius: 32rpx;
          text-align: center;
          padding: 8rpx 12rpx;
          width: 160rpx;
          height: 44rpx;
          line-height: 44rpx;
        }

        // 激活状态的话题
        .label-tag-active-container {
          background-color: #3FD3D1;
        }

      }

    }

    .submit-container {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: 140rpx;
      padding-bottom: 30rpx;


      .submit-btn {
        background-color: #3fd3d1;
        color: #FFFFFF;
        width: 100%;
        height: 100rpx;
        line-height: 100rpx;
        border-radius: 16rpx;
        font-size: 36rpx;
        text-align: center;
      }
    }
  }
</style>